<template>
	<!--发现——导航-->
	<div class="FindtheNavigation">
		<router-link @click.native="changeStyle(0)" to="/indexOne/sonOne" :class="{current:active==0}">精选</router-link>
		<router-link @click.native="changeStyle(1)" to="/indexOne/sonTwo" :class="{current:active==1}">歌单</router-link>
		<router-link @click.native="changeStyle(2)" to="/indexOne/sonThree" :class="{current:active==2}">排行</router-link>
		<router-link @click.native="changeStyle(3)" to="/indexOne/sonfour" :class="{current:active==3}">电台</router-link>
		<router-link @click.native="changeStyle(4)" to="/indexOne/sonpenta" :class="{current:active==4}">MV</router-link>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				active:0,
			}
		},
		methods:{
			changeStyle(index){
				this.active = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.FindtheNavigation {
		
		width: 100%;
		font-size: 0;
		white-space: nowrap;
		position: relative;
		z-index: 10;
		background: #fff;
		overflow: hidden;
		a {
			font-size: 16px;
			font-weight: 500;
			width: 20%;
			padding: 4% 0;
			display: inline-block;
			text-align: center;
			box-sizing: border-box;
			color: #818181;
		}
	}
	
	.FindtheNavigation .current {
		color: #eb1946;
		border-bottom: 2px solid #f82653;
	}
</style>